<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    function fun() {
      alert('保存成功！');
    }
  </script>
</head>
<style>
  id{
    text-align:left;
  }
  .bro{
    color: rgb(129, 127, 127);
    font-size: 1px;
  }
  input{
    color: rgb(109, 104, 104);
  }
  a1{
    color: red;
  }
  li{
    list-style-type: none;
  }
  label{
    width: 100px;
    text-align: right;
    display: inline-block;
  }
  body form{
    border: 1px rgb(255, 255, 255) solid;
    width: 800px;
    height: 500px;
    font-size: 10px;
    margin-left: 500px;
  }
  #one,#six{
    width: 148px;
    height: 30px;

  }
  #two{
    width: 400px;
    height: 60px;
  }
  #three,#four,#night{
    width: 400px;
    height: 30px;
  }
  #five,#seven{
    width: 110px;
    height: 30px;
  }
  #nine{
    width: 100px;
    height: 30px;
    background-color: rgb(245, 11, 11);
    color: black;
    position: absolute;
    left: 600px;
  }
  #ten{
    width: 100px;
    height: 30px;
    background-color: rgb(245, 11, 11);
    color: black;
    position: absolute;
    left: 700px;
  }
  a{
    text-decoration: none;
  }

</style>
<body>
  <h1>我的地址</h1>
  <p class="bro">—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————</p>
  <p><h3>新增收货地址</h3></p>
  <div id="b">
  <form>
    <ul>
      <p>
      <li><label><a1>*</a1>   所在地区</label>
    <input list="browsers" name="browser" id="one" placeholder="请选择省份">
    <datalist id="browsers">
    <option value="山西省">
    <option value="陕西省">
    <option value="河北省">
    <option value="甘肃省">
    </datalist>
  </li>
  </p><br/>
  <p>
    <li>
      <label><a1>*</a1>   详细地址</label>
      <input type="text" value="无需重复填写省市区，小于75个字" id="two">
    </li>
  </p>
  <p><br/>
    <li>
      <label><a1>*</a1>   收货人姓名</label>
    <input type="text" value="不能为昵称、x先生、x小姐等，请使用真实姓名" id="three"></p>
  </li><br/>
  <p>
    <li>
      <label><a1>*</a1>   手机号码</label>
    <input type="tel" value="手机号码，电话号码必须填一致" id="four"></p>
  </li><br/>
  <li><label>电话号码</label>
  <input type="textr" value="区号" id="five">
  -<input type="text" value="电话号码" id="six">
  -<input type="text" value="分机号（可选）"  id="seven">
</li><br/>
  <p>
    <li><label>邮箱</label>
    <input type="text" value="接受订单提醒邮件，便于您及时了解订单状态" id="night"></li></p><br/>
    <p><button id="nine" onclick="fun()"><a href="shopping2.html">保存新地址</a></button></ul></p>
    <button id="ten"><a href="index.html">返回</a></button>
</ul>
  </form>
</div>
</body>
</html>